<template>
<div v-loading="loading" style="width: 100vw;height: 100vh;background: #EEEEEE">
  <top :title="title" :isSecond="1"/>
<!--  <div class="pic"></div>-->
  <el-row style="z-index: 99">
    <el-cascader
      style="width: 84vw;margin-top: 2vh;"
      v-model="semester"
      :options="semesterList"
      placeholder="请选择学期"
      @change="handleChange"></el-cascader>
  </el-row>
  <el-row style="z-index: 99;width: 84vw;margin: 2vh auto;">
    <el-table
      :data="gradesInfo"
      style="width: 100%;"
      align="center"
    >
      <el-table-column
        prop="name"
        label="课程名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="credit"
        label="学分"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="gpa"
        label="绩点"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="grade"
        label="成绩"
        align="center"
      ></el-table-column>
    </el-table>
  </el-row>
  <el-row style="z-index: 99;margin-top: 2vh;font-weight: bold;font-size: 1.2rem;">
    <p>平均绩点：{{avgGpa}}</p>
  </el-row>
  <bottom/>
</div>
</template>

<script>
import top from '@/components/top'
import bottom from '@/components/bottom'
export default {
  name: 'grade',
  data () {
    return {
      title: '成绩查询',
      loading: false,
      avgGpa: 3.21,
      gradesInfo: [
        { name: '程序设计基础1', credit: 4, gpa: 4.5, grade: '95' },
        { name: '程序设计基础2', credit: 3, gpa: 3.5, grade: '85' },
        { name: '艺术基础', credit: 2, gpa: 2.5, grade: '良' },
        { name: 'Web开发', credit: 4, gpa: 4.5, grade: '优秀' },
        { name: '程序设计基础', credit: 4, gpa: 4.5, grade: '95' }
      ],
      semester: null,
      semesterList: [
        { value: 0, label: '2019-2020第一学期' },
        { value: 1, label: '2019-2020第二学期' },
        { value: 2, label: '2020-2021第一学期' },
        { value: 3, label: '2020-2021第二学期' },
        { value: 4, label: '2021-2022第一学期' },
        { value: 5, label: '2021-2022第二学期' },
        { value: 6, label: '2022-2023第一学期' }
      ]
    }
  },
  methods: {
    handleChange () {}
  },
  components: {
    top,
    bottom
  }
}
</script>

<style lang="stylus" scoped>
.pic
  width: 100vw
  height: 16vh
  background: linear-gradient(90deg, #3A62FF 0%, #4C95FD 100%);
  border-bottom-left-radius 40vw
  border-bottom-right-radius 40vw
  position: absolute;
  top:6vh
  z-index 10
</style>
